<script setup lang="ts">
import { ref, defineEmits, reactive, computed } from 'vue';
import type { FormInstance } from 'ant-design-vue';

const emits = defineEmits<{
    (e: "addTask", value: string): void;
}>()


interface formDataType {
    task: string
}


const formRef = ref<FormInstance>();


const formData = reactive<formDataType>({ task: "" })


const reserverTask = computed(() => {
    let content: string

    content = formData.task.trim()

    emits("addTask", content)

    return formData.task
})
console.log(reserverTask)

</script>

<template>
    <div>
        <a-form ref="formRef" :model="formData">
            <a-form-item label="临时记录" name="task" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
                <a-input v-model:value="formData.task" />
            </a-form-item>
            <!-- <a-form-item :wrapper-col="{ offset: 4 }">
                <a-button type="primary" html-type="submit" @click="handleSubmit">失焦弹窗是否确认保存</a-button>
            </a-form-item> -->
        </a-form>
    </div>
</template>
